<template>
  <div class="front-container">
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <div class="head">
                <div class="head-nav" ref="head_nav">
                  <Head></Head>
                </div>
                <Swiper></Swiper>
            </div>
        </el-col>
        <!-- 内容 -->
        <el-col :span="24">
            <div class="bg-purple-light center">
                <Center></Center>
            </div>
        </el-col>
        <!-- 脚部 -->
        <el-col :span="24">
            <div class="bg-purple footer">
                <Footer></Footer>
            </div>
        </el-col>
    </el-row>
  </div>
</template>
<script>
import Head from "@/views/front/head/Head.vue";
import Center from "@/views/front/center/Center.vue";
import Footer from "@/views/front/footer/Footer.vue";
import Swiper from "@/views/front/head/Swiper.vue";
export default {
  name: "myHome",
  components: { Head, Center, Footer,Swiper },
};
</script>
<style lang="less" scoped>
.front-container{
    .head{
        height: 17rem;
        .head-nav{
          position: fixed;
          width: 100%;
          top:0%;
          z-index: 10;
        }
    }
    .center{
        height: auto;
        background-color: #f0eeee;
    }
    .footer{
        height: auto;
        background: #FFF;
    }
    .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
}
  
  
</style>